<template>
  <div id="boxGeometry"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry(50, 50, 50)

/**
 * 材质对象material
 */
const material = new THREE.MeshBasicMaterial({
    color: 'pink',
    transparent: true,
    opacity: 0.5
})

// 通过for循环
for (let i = 0;i < 10; i ++) {
    // const mesh = new THREE.Mesh(geometry, material)
    // mesh.position.set(i * 60, 0, 0)
    // scene.add(mesh)
    for (let j = 0; j < 10; j ++) {
        const mesh = new THREE.Mesh(geometry, material)
        mesh.position.set(i * 60, -j * 60, 0)
        scene.add(mesh)
    }
}
/**
 * 相机对象camera参数
 * 1. field of view 视野角度
 * 2. aspect ratio 宽高比
 * 3. near 近平面
 * 4. far 远平面
 * 近平面和远平面之间的区域就是视景体
 * 视景体内的物体才会被渲染
 * 视景体外的物体不会被渲染
 * 视景体越小，渲染的物体越少，性能越好
 * 视景体越大，渲染的物体越多，性能越差
 * 一般情况下，near和far尽量设置合理的值，不要设置太大或太小，否则会导致渲染不出
 * 如何设置合理的值，根据场景的大小来设置
 */
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 8000)
camera.position.set(2000, 2000, 2000);

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

// const animate = () => {
//     requestAnimationFrame(animate)
//     // mesh.rotation.x += 0.01
//     // mesh.rotation.y += 0.01
//     renderer.render(scene, camera)
// }

onMounted(() => {
    document.getElementById('boxGeometry').appendChild(renderer.domElement)
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', () => renderer.render(scene, camera))
    // animate()
    renderer.render(scene, camera)
    
})
window.onresize = () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
}
</script>

<style>

</style>